<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction 
      @click="updateIndex"
      :instruction="instruction" :showRadioCheck="true">
    </play-instruction>
    <div class="row-wrapper">
      <div class="select-row" v-for="(item, index) in getCurrentLotteryState" :key="item.id">
        <div v-if="index == 5">
          <lottery-ball-only
            :activeSwitchIndex="activeSwitchIndex"
            @click="handleUpdateData"
            :item="item"
          ></lottery-ball-only>
        </div>
        <div v-else-if="index == 6" class="checkbox-selector-wrapper">
          <div class="title">合值快捷选号</div>
          <checkbox-selector class="checkbox-selector" :item="item" @click="handleUpdateData"></checkbox-selector>
        </div>
        <div v-else>
          <balls-and-selector 
            :activeSwitchIndex="activeSwitchIndex"
            @click="handleUpdateData"
            :item="item">
          </balls-and-selector>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="number-select-phone">
    <div class="row-wrapper">
      <div class="select-row" v-for="(item, index) in getCurrentLotteryState" :key="item.id">
        <div v-if="index == 5">
          <balls-and-selector-phone
            class="sum-number"
            :activeSwitchIndex="activeSwitchIndex"
            @click="handleUpdateData"
            :item="item"
          ></balls-and-selector-phone>
        </div>
        <div v-else-if="index == 6" class="checkbox-selector-wrapper">
          <div class="title">合值快捷选号</div>
          <checkbox-selector class="checkbox-selector" :item="item" @click="handleUpdateData"></checkbox-selector>
        </div>
        <div v-else>
          <balls-and-selector-phone 
            :activeSwitchIndex="getRadioSelectorIndex"
            @click="handleUpdateData"
            :item="item">
          </balls-and-selector-phone>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BallsAndSelector from '@/components/lottery-type/common/balls-and-selector'
import BallsAndSelectorPhone from '@/components/lottery-type/common/balls-and-selector-phone'
import LotteryBallOnly from '@/components/lottery-type/common/lottery-ball-only'
import CheckboxSelector from '@/components/base/checkbox-selector/checkbox-selector'
import PlayInstruction from '@/components/play-instruction/play-instruction'
import { ballWithSelectorMixin } from '@/assets/js/mixin.js'

export default {
  mixins: [ballWithSelectorMixin],
  components: {
    BallsAndSelector,
    PlayInstruction,
    LotteryBallOnly,
    CheckboxSelector,
    BallsAndSelectorPhone
  },
  data() {
    return {
      instruction: '任二复式',
      activeSwitchIndex: 0,
      lotteryCount: 0
    }
  },
 
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@media screen and (min-width 750px)
  .number-select
    .row-wrapper
      position relative 
      .select-row 
        .checkbox-selector-wrapper
          position absolute
          right 20px
          bottom 20px
          .title
            font-weight 700
            margin-bottom 5px
@media screen and (max-width 750px)
  .sum-number >>> .select-row 
    .top 
      .selector 
        display none
  .select-row 
    .checkbox-selector-wrapper
      margin-bottom 15px
      margin-top 10px
      text-align center
      .checkbox-selector 
        justify-content center
        margin-top 10px
    .sum-number 
      border-bottom none !important 

</style>